<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.table_container{
				position: absolute;
				right: .06125rem;
				top: 0;
				height: 99%;
				width: 38%;
				border: #FFF9D7 solid 1px;
				display: flex;
				
				flex-direction: column;
				align-items: center;
			}
				
			.item_head{
				position: relative;
				width: 90%;
				height: 10%;
				border: #000000 solid 1px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25px;
				
			}
			.item_list{
				position: relative;
				width: 90%;
				height: 90%;
				overflow: hidden;
				border: #000000 solid 1px;
				
			}
			.item{
				position: relative;
				display: flex;
				width: 100%;
				height: 18%;
				border: #000000 solid 1px;
				
			}
			.left{
				position: relative;
				height: 100%;
				width: 10%;
				font-size: 20px;
				color: #cecece;
				display: flex;
				justify-content: center;
				align-items: center;
				border: #0000FF solid 1px;
			}
			.middle{
				position: relative;
				display: flex;
				width: 60%;
				height: 100%;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border: #07BE6E solid 1px;
			}
			.name{
				position: relative;
				display: flex;
				font-size: 20px;
				justify-content: flex-start;
				align-items: center;
				height: 40%;
				width: 100%;
				border: #07BE6E solid 1px;
				
			}
			.pricr_num{
				position: relative;
				width: 100%;
				height: 40%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.num{
				height:100% ;
				width: 80%;
				
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border:  #02A6B5 solid 1px;
			}
			.price{
				height: 100%;
				width: 30%;
				font-size: 18px;
				font-weight: 800;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border:  #02A6B5 solid 1px;
			}
			.right{
				position: relative;
				width: 30%;
				display: flex;
				justify-content: center;
				align-items: center;
				border:  #31B0D5 solid 1px;
			}
			#left{
				position: absolute;
				left: 20px;
				top: 30px;
				width: 40%;
				height: 100px;
				border: #000000 solid 1px;
				overflow-y: auto;
			}
			 #left::-webkit-scrollbar {
			            width: 4px;    
			            /*height: 4px;*/
			        }
			        #left::-webkit-scrollbar-thumb {
			            border-radius: 10px;
			            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			            background: rgba(0,0,0,0.2);
			        }
			        #left::-webkit-scrollbar-track {
			            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			            border-radius: 0;
			            background: rgba(0,0,0,0.1);
			
			        }
			
		</style>
	</head>
	<body>
		<div id="left">
			<p>ss</p>
			<p>ss</p>
			<p>ss</p>
			<p>ss</p>
			
		</div>
		<div class="table_container">
			<div class="item_head">
					销售总榜
			</div>
			<div class="item_list">
				
				<div class="item">
					<div class="left">
						#1
					</div>
					<div class="middle">
						<div class="name">
							差评啥
						</div>
						<div class="pricr_num">
							<div class="price">
								$12
							</div>
							<div class="num">
								123单
							</div>
						</div>
					</div>
					<div class="right">
						<img src="../../static/img/My_logo.png" style="width: 80%; height: 90% ; border: #000000 solid 1px; border-radius: 10px;" >
					</div>
				</div>
				
			</div>
			<!-- <table class="table table-hover">
				<thead>
					<tr>
						<th>排行</th>
						<th>菜名</th>
						<th>价格</th>
					</tr>
				</thead>
				<tbody>
					{% for item in data_list %}
					<tr>
						<th>{{data_list.index(item)+1}}</th>
						<th>{{item.DNAME}}</th>
						<th>{{item.N}}</th>
					</tr>
					{% endfor%}
				</tbody>
			</table> -->
		</div>
	</body>
</html>
